import classNames from 'classnames';
import { format } from 'date-fns';
import { useTranslation } from 'react-i18next';
import Button from 'src/component/Button';
import { Action } from 'src/constant/Order';
// import { UserOrder } from 'src/model/Order';
import { bnFormat } from 'src/util/bigNumber';
import style from './Table.module.scss';
type UserOrder = any
type Props = {
  data: UserOrder[];
  onAction: (id: string, action: Action) => void;
};

const Table = ({ data, onAction }: Props) => {
  const { t } = useTranslation();
  const elementMapFunction = (order: UserOrder, index: number, array: UserOrder[]) => (
    <div key={order.FID}>
      <div className={style.row}>
        <div className={classNames(style.width1, style.item)}>
          {/* {`${bnFormat(order.FPrice)} ${order.FCNY}`} */}
          {`${order.FPrice} ${order.FCNY}`}
        </div>
        <div className={classNames(style.width2, style.item)}>
          <div className={style.subItem}>
            <span className={style.label}>数量</span>
            {`${bnFormat(order.FQuantity)} ${order.FGoods}`}
          </div>
          <div className={style.subItem}>
            <span className={style.label}>限额</span>
            {`${bnFormat(order.FMin)} - ${bnFormat(
              order.FMax,
            )} ${order.FCNY}`}
          </div>
        </div>
        <div className={classNames(style.width1, style.item)}>
          {/* {`${order.bankAccount.bankName}-${order.bankAccount.name}`} */}
          {order.FWay}
        </div>
        <div className={classNames(style.width1, style.item, style.primaryColor)}>
          <div>
            {order.FState}
          </div>
          {/* {order.status === 'open' && order.suspendedAt && (
            <div>
              {t('myTrade.desc.statusSuspendDate', {
                date: format(Date.parse(order.suspendedAt), 'yyyy/MM/dd HH:mm'),
              })}
            </div>
          )} */}
        </div>
        <div className={classNames(style.controlls, style.width1)}>
          {order.FState == '上架中' && (
            <>
              <div className={style.editPublish}>
                <Button
                  appearance="secondary"
                  size="small"
                  onClick={() => onAction(order.FID, Action.Edit)}
                >
                  编辑
                </Button>
                <Button
                  appearance="secondary"
                  size="small"
                  onClick={() => onAction(order.FID, Action.Suspend)}
                >
                  下架
                </Button>
              </div>
            </>
          )}
          {order.FState == '下架中' && (
            <>
              <div className={style.editPublish}>
                <Button
                  appearance="secondary"
                  size="small"
                  onClick={() => onAction(order.FID, Action.Edit)}
                >
                  编辑
                </Button>
                <Button
                  appearance="secondary"
                  size="small"
                  onClick={() => onAction(order.FID, Action.Unsuspend)}
                >
                  上架
                </Button>
              </div>
              <Button
                appearance="secondary"
                size="small"
                onClick={() => onAction(order.FID, Action.Delete)}
              >
                删除
              </Button>
            </>
          )}
        </div>
      </div>
      <div className={classNames(style.divider, { [style.hide]: index >= array.length - 1 })} />
    </div>
  );

  return (
    <div>
      <div className={style.columnTitlesRow}>
        <div className={classNames(style.width1, style.label)}>单价</div>
        <div className={classNames(style.width2, style.label)}>{`${"数量"}/${"限额"}`}</div>
        <div className={classNames(style.width1, style.label)}>收/付款方式</div>
        <div className={classNames(style.width1, style.label)}>状态</div>
        <div />
      </div>
      <div className={style.divider} />
      {data.map(elementMapFunction)}
    </div>
  );
};

export default Table;
